<template>
    <div>
        <div class="introduce-item">
            <div class="introduce-title" @click="hidden">{{ title.title }}<span :class="show ? 'icon-arrow-down-bold' : 'icon-arrow-right-bold'" class="iconfont icon-arrow-down-bold"></span></div>
            <div v-show="show" class="introduce-box" v-for="item in title1" :key="item.id">
                <div class="box-item" v-if="title.id == item.chapter_id" @click="gotoVideo(item.id)">
                    <div class="item-title">
                        <span>试看</span>
                        <span>{{ item.title }}</span>
                    </div>
                    <div class="item-time">0{{ item.duration / 60 }}:00</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["title", "section1"],
    data() {
        return {
            show: true,
            title1: [],
            playstate: false,
            routeId: "",
        };
    },
    created() {
        this.routeId = parseInt(this.$route.query.id);
        this.section1.forEach((item) => {
            item.forEach((i) => {
                this.title1.push(i);
            });
        });
    },
    methods: {
        hidden() {
            this.show = !this.show;
        },
        gotoVideo(id) {
            this.$router.push({
                path: "/vod/video",
                query: {
                    id: id,
                },
            });
            if (this.routeId == id) {
                this.$router.go(0);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.introduce-item {
    width: 100%;
    .introduce-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        color: #333;
        font-weight: 700;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .introduce-box {
        width: 100%;
        .box-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            line-height: 36px;
            padding: 0 10px 0 10px;
            background: #f6f6f6;
            border-radius: 4px;
            .item-title {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #333;
                span:nth-child(1) {
                    padding: 2px 4px;
                    background-color: #04c877;
                    border-radius: 2px;
                    color: #fff;
                    font-size: 12px;
                    margin-right: 10px;
                }
                span:nth-child(2) {
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 14px;
                    color: #333;
                }
            }
            .item-time {
                width: auto;
                height: auto;
                font-size: 12px;
                margin-left: 10px;
                color: #999;
            }
        }
    }
}
</style>
